<template>
  <div>
    <audio
      v-if="type"
      ref="audioPlayDom"
      @play="handleAudioPlay"
      @pause="handleAudioPause"
      @ended="handleAudioEnded"
      :src="audioURL[type].src"
    ></audio>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //   audioSrc: "",
      audioURL: {
        1: {
          // 正确率低于60%或者是黑铁段位
          src: require("../assets/audio/audio-grade1.mp3"),
        },
        2: {
          // 青铜段位
          src: require("../assets/audio/audio-grade2.mp3"),
        },
        3: {
          // 白银段位
          src: require("../assets/audio/audio-grade3.mp3"),
        },
        5: {
          // 钻石段位
          src: require("../assets/audio/audio-grade5.mp3"),
        },
        6: {
          // 大师段位
          src: require("../assets/audio/audio-grade6.mp3"),
        },
        7: {
          // 王者段位
          src: require("../assets/audio/audio-grade7.mp3"),
        },
        8: {
          //   登录
          src: require("../assets/audio/audio-login-first.mp3"),
        },
        9: {
          //   好久不见
          src: require("../assets/audio/audio-login-long.mp3"),
        },
      },
      isPlaying: false,
      type: null,
    };
  },
  methods: {
    handleAudioPlay() {
      // 播放音频开始
      // console.log("handleAudioPlay");
      this.isPlaying = true;
    },
    handleAudioEnded() {
      // 播放音频结束
      // console.log("handleAudioPlayEnded");
      this.isPlaying = false;
    },
    handleAudioPause() {
      // 播放音频暂停
      // console.log("handleAudioPause");
      this.isPlaying = false;
    },
    playAudio() {
      if (this.$refs.audioPlayDom) {
        this.$pauseAllAudio();
        this.$pauseAllVideo();
        this.$refs.audioPlayDom.play();
      }
    },
    changeType(type, isPlay) {
      this.type = type;

      if (isPlay) {
        this.$nextTick(() => {
          this.playAudio();
        });
      }
    },
  },
  props: {},
};
</script>